<template>
	
	<view class='mymessage'>
		  <view class="my_message" v-for="(item, index) in myMessage" :key='index' >
		  	<view class="my_image">
		  		<image src="../../static/message/ico_01_08.png" mode=""></image>
		  	 </view>
			 
			<view class="my_right" @click="onshow(index,item.reason)">
				<view class="text">
					
					<view class="text_left">{{item.reason}}</view> 
					<view class="text_right">
						<!-- {{item.create_time | timeStamp}} -->
						{{item.create_time}}
					</view>
				</view>
				<view class="text1" v-show="item.isShow">
					举报项目：{{item.reason}}
				</view>
				<view class="text1" v-show="item.isShow">
					具体内容：{{item.description}}
				</view>
				<!-- <view class="text1" v-show="item.isShow">
					投诉答复：{{item.reply}}
				</view> -->
				<!-- <view class="text1" v-show="item.isShow">
					状态：{{item.status==1?'已回复':'待回复'}}
				</view> -->
				<view class="text1" v-show="item.isShow">
				  <template v-if="item.status === 0">
				    <text style="color: red;">状态：未受理</text>
				  </template>
				  <template v-else-if="item.status === 1">
				    <text style="color: blue;">状态：已受理</text>
				  </template>
				  <template v-else-if="item.status === 2">
				    <text style="color: red;">状态：处理完成</text>
				  </template>
				</view>
				<view class="more" @click.stop="showMroe(item)">
					{{item.isShow?'收起信息':'查看更多'}}
				</view>
			<!-- 	<view class="text1" v-if="item.isSelected===true">{{item.reason}}</view>
				<view class="text1" v-if="item.isSelected===false" :class="{ cen_con : text }">{{item.reason}}</view>-->
				<view class="shouqi" v-if="item.isSelected===true" @click.stop="clickshouqi1(index)" >收起 
				<image src="../../static/message/btn_01.png" mode=""></image>
				</view>
			</view>
		  </view>
		  <view class="bottom">
		  	没有更多了
		  </view>
	</view>
</template>

<script>
	export default {
	  props: {},
	  data() {
	    return {
			text: true ,
			myMessage:[]
		};
	  },
	  filters:{
		  timeStamp: function(value) {
		  	if (!value) return '';
		  	var now = new Date(value*1000);
		  	//console.log("time:" + JSON.stringify(now));
		  	// var year = now.getFullYear();
		  	var month = now.getMonth() + 1;
		  	if (month < 10) {
		  		month = '0' + month
		  	}
		  	var date = now.getDate();
		  	if (date < 10) {
		  		date = '0' + date
		  	}
		  	return  month + "-" + date
		  }
	  },
	  computed: {},
	  onLoad() {
		  this.mymessage()
	  },
	  methods: {
		  // 点击展开收起
		  showMroe(e) {
		  	const status = e.isShow;
		  	this.myMessage.forEach(item => {
		  		item.isShow = false
		  	})
		  	e.isShow = !status
		  	this.$forceUpdate()
		  },
		  onshow(index,msg){
			  if(msg != ''){
			  	var pattern = new RegExp("[\u4E00-\u9FA5]+");
			  	var pattern2 = new RegExp("[A-Za-z]+");
			  	var pattern3 = new RegExp("[0-9]+");
			  	if(pattern.test(msg) && msg.length > '15'){
			  		this.myMessage[index].isSelected=true
			  	}else if(pattern2.test(msg) && msg.length > 30){
			  		this.myMessage[index].isSelected=true
			  	}else if(pattern3.test(msg) && msg.length > 30){
			  		this.myMessage[index].isSelected=true
			  	}else{
			  		this.myMessage[index].isSelected=false
			  	}
			  }
		  },
		  async mymessage(){
			  let res = await this.$request({
				  url:'/admin/system/sysComplaint/findAllComplaint'
			  })
			  if(res.code ===200){
				  this.myMessage = res.data
				  const vm = this;
				  this.myMessage.forEach(function(res)
				  {
					  vm.$set(res,"isSelected",false)
				  })
				  // console.log( this.myMessage)
			  }else{
				  // console.log("1")
			  }
		  },
		  clickshouqi1(index){
			  this.myMessage[index].isSelected=false
		  }
	  },
	};
</script>

<style scoped lang="less" >
	.mymessage{
		width: 690rpx;
		margin: 0 30rpx;
		.my_message{
			margin-top: 44rpx;
			display: flex;
			.my_image{
				image{
					width: 78rpx;
					height: 78rpx;
				}
			}
			.my_right{
				margin-left: 32rpx;
				position: relative;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #e6e6e6;
				.text{
					display: flex;
					justify-content: space-between;
					width: 580rpx;
					.text_left{
						color: #262626;
						font-size: 32rpx;
					}
					.text_right{
						color: #b3b3b3;
						font-size: 24rpx;
					}
				}
				.text1{
					color: #808080;
					font-size: 26rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
				}
				.shouqi{
					position: absolute;
					bottom: 22rpx;
					right: 0;
					font-size: 24rpx;
					color: #b3b3b3;
					image{
						width: 20rpx;
						height: 20rpx;
						margin-left: 7rpx;
					}
				}
			}
		}
	}
	
	.bottom{
		margin-top: 25rpx;
		color: #B3B3B3;
		font-size: 26rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.cen_con{
		width: 400rpx !important ;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.more {
		position: absolute;
		bottom: 0;
		right: 20rpx;
		font-size: 28rpx;
		color: #6e7069;
	}
</style>